<template>
  <a-card :title="flowData?.displayName">
    <BasicForm @register="registerForm" v-bind="$attrs" :disabled="disabled" />
  </a-card>
</template>
<script setup name="schemaWfForm|元数据表单">
  import { onMounted, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { useFormSchema } from '/@/hooks/web/useSchema';

  const props = defineProps({
    flowData: {
      type: Object,
    },
    processInstance: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  });
  // 注册表单
  const [registerForm, formAction] = useForm({
    labelWidth: 100,
    // showResetButton: false,
    // showSubmitButton: false,
    showActionButtonGroup: false,
  });
  const initForm = () => {
    useFormSchema({
      tableName: props.flowData.name,
      formRef: formAction,
      disabled: props.disabled,
    }).then(() => {
      formAction.setFieldsValue(props.processInstance?.formData);
    });
  };
  watch(
    () => props.flowData?.name,
    (n) => {
      if (n) {
        initForm();
      }
    },
  );
  onMounted(() => {
    if (props.flowData?.name) {
      initForm();
    }
  });
  defineExpose({
    ...formAction,
  });
</script>
